<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>AngularJs Route Service</title>
		<!--<base href="http://alsguo.github.io/angularjs/" />-->
		<base href="http://127.0.0.1:8020/angular-js-demo/angularjs/" />
	</head>

	<body ng-app="routeApp">
		<h2>这是导航</h2>
		<div ng-view></div>
		<script type="text/javascript" src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
		<script type="text/javascript" src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular-route.js"></script>
		<script type="text/ng-template" id="/scripts/template/book_list.html">
			书籍列表
			<ul>
				<li ng-repeat="book in books">
					<a href="book/{{book.id}}">{{book.name}}</a>
				</li>
			</ul>
		</script>
		<script type="text/ng-template" id="/scripts/template/book_item.html">
			<p>
				<a href="book">返回列表</a>
			</p>
			<h2>{{book.name}}</h2>
			<blockquote>
				<p>作者 : {{book.author}}</p>
				<p>描述 : {{book.description}}</p>
			</blockquote>
		</script>
		<script type="text/javascript">
			var routeApp = angular.module('routeApp', ['ngRoute'])

			routeApp.config(function($routeProvider, $locationProvider) {
				$routeProvider
					.when('/book', {
						templateUrl: '/scripts/template/book_list.html',
						controller: 'BookListCtrl'
					})
					.when('/book/:id', {
						templateUrl: '/scripts/template/book_item.html',
						controller: 'BookItemCtrl'
					})
					.otherwise({
						redirectTo: '/book'
					});
				$locationProvider.html5Mode(!0);
			});

			routeApp.controller('BookListCtrl', function($scope, $http) {
				$scope.books = [];
				$http.get('./data/book.json').success(function(data) {
					$scope.books = data.books;
				})
			});

			routeApp.controller('BookItemCtrl', function($scope, $http, $routeParams) {
				$http.get('./data/book.json').success(function(data) {
					$scope.book = data.books[$routeParams.id - 1];
				})
			});
		</script>
	</body>

</html>